@extends("base.base")
@include('Home.header')

@section("main")
    <link rel="stylesheet" href="{{asset(env("CDN_HOST")."/resources/swiper-4.1.6/css/swiper.min.css")}}">
    {{--<link rel="stylesheet" href="{{asset("/js/swiper/dist/css/swiper.min.css")}}">--}}
    <link rel="stylesheet" href="{{asset(env('CDN_HOST')."/public/css/home/index.css")}}">
    <main id="main" class="main">

        <div id="main-header" class="main-header">
            <!-- Slider main container -->
            <div class="swiper-container">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    @foreach ($banner as $key => $value)
                        <div class="swiper-slide">
                            <a href="/commodity/{{$value["id"]}}">
                                <img class="swiper-slide-img" src="{{asset(env('CDN_HOST').$value["uri"])}}"
                                                       alt="">
                            </a>
                        </div>
                    @endforeach
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="main-header-info">
                <ul class="nav-ul main-header-info-ul">
                    <li class="nav-li main-header-info-li"><i class="fa fa-check-circle-o main-header-fa-check"
                                                              aria-hidden="true"></i>&ensp;一冉再自品牌
                    </li>
                    <li class="nav-li main-header-info-li"><i class="fa fa-check-circle-o main-header-fa-check"
                                                              aria-hidden="true"></i>&ensp;30天无忧退货
                    </li>
                    <li class="nav-li main-header-info-li"><i class="fa fa-check-circle-o main-header-fa-check"
                                                              aria-hidden="true"></i>&ensp;48小时快速退款
                    </li>
                </ul>
            </div>
        </div>
        <content id="content" class="content">
            <div class="content-title">
                一冉再推荐商品&ensp;<i class="fa fa-angle-double-right content-title-fa" aria-hidden="true"></i>
            </div>
            <ul class="nav-ul content-ul">
                @foreach($commodity as $key => $value)
                    <a href="/commodity/{{$value["commodity_id"]}}">
                    <li class="nav-li content-li">
                        <div class="content-li-box">
                            <p class="content-li-box-p overflow_hidder">{{$value["commodity_name"]}}</p>
                            <p class="content-li-box-p">{{$value["commodity_info_price"]}}元起</p>
                            <img class="content-li-box-img"
                                 src="{{$value["index_img_url"]}}" alt="">
                        </div>
                    </li>
                    </a>
                @endforeach
                <span class="clear-both"></span>
            </ul>
        </content>

    </main>
    <script src="{{asset(env("CDN_HOST")."/resources/swiper-4.1.6/js/swiper.min.js")}}"></script>
    {{--<script src="{{asset("/js/swiper/dist/js/swiper.min.js")}}"></script>--}}
    <script>
        var swiper = new Swiper('.swiper-container', {
            speed: 400,
            spaceBetween: 0,
            autoplay: {
                delay: 4000,
                disableOnInteraction: false,
            },
            loop: true,
            slidesPerView: 1,
            effect: 'slide',
            pagination: {
                el: '.swiper-pagination'
            },
        });
        loading.hide()
    </script>
@endsection
@include('base.bottom_nav')